<template>
  <div class="home-wrapper">
    <van-field
      v-model="title"
      class="input"
      center
      clearable
      placeholder="请输入todo的内容"
    >
      <template #button>
        <van-button @click="createTodo" type="primary">提交</van-button>
      </template>
    </van-field>

    <div class="list" v-if="todoListData.length > 0">
      <van-cell
        v-for="(item, index) in todoListData"
        :key="index"
        :title="item.content"
        is-link
        size="large"
        class="my-item"
        border
        :to="{
          name: 'Todo',
          params: {
            todoid: item.objectId
          }
        }"
      />
    </div>
    <div v-else class="empty">暂无数据</div>
  </div>
</template>

<script>
import axios from "axios";
import { Toast } from "vant";

export default {
  name: "Home",
  data() {
    return {
      title: "",
      todoListData: []
    };
  },
  created() {
    this.getTodoList();
  },
  methods: {
    getTodoList() {
      Toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0
      });
      axios.get("https://api.yizhanketang.cn/api/v1/todos").then(res => {
        const { data: listData } = res.data;
        this.todoListData = listData;
        Toast.clear();
      });
    },
    createTodo() {
      axios
        .post("https://api.yizhanketang.cn/api/v1/todos", {
          content: this.title
        })
        .then(() => {
          this.getTodoList();
        });

      this.title = "";
    }
  }
};
</script>

<style lang="scss">
.home-wrapper {
  .input .van-field__body {
    border: 0.01rem solid #333333;
  }

  .creat-wrapper {
    display: flex;
    margin: 0.2rem;

    input {
      border: 0.01rem solid #333333;
      height: 1rem;
      box-sizing: border-box;
      flex: 1;
      padding: 0 0.1rem;
    }

    .btn {
      height: 1rem;
      width: 1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #333333;
      box-sizing: border-box;
    }
  }

  .list {
    margin: 0.2rem;

    .my-item {
      /*background-color: #1595ff;*/
      /*color: #fff;*/
      padding: 0.2rem;

      &:after {
        border-bottom-color: #1595ff;
      }
    }

    .item {
      padding: 0.2rem;
      line-height: 0.7rem;
      background-color: #1595ff;
      color: #fff;
      display: block;
      margin-bottom: 0.2rem;
    }
  }

  .empty {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 0;
  }
}
</style>
